<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style>
	*{margin: 0;padding: 0;list-style: none;}
		#box{
			width: 360px;
			height: 360px;
			border: 10px solid gray;
			border-radius: 50%;
			box-shadow: inset 0 0 13px 2px #868484;
			margin: 100px auto;
			position: relative;
			display: flex;
		}
		#box #main{
			margin: auto;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background: #dddddd;
			position: relative;
		}
		#box #main>div{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: gray;
			position:absolute;
			left: 5px;
			top: 5px;
		}
		#main p{
			position: absolute;
			left: 80px;
			z-index: -1;
			display: block;
			width: 30px;
			height: 20px;
			text-align: center;
			background-image:linear-gradient(to bottom,#8B8B7A,#fff 50%,#8B8B7A)}
		#hour div{
			position: absolute;
			bottom: 50%;
			left: 4px;
			width: 12px;
			height: 80px;
			background: black;
			transform-origin: bottom;
			
		}
		#hour div::after{
			content: '';
			position: absolute;
			left: 0;
			top: -18px;
			border-left:6px solid transparent;
			border-top:6px solid transparent;
			border-right:6px solid transparent;
			border-bottom:12px solid black;
		}
		#minutes div{
			position: absolute;
			bottom: 50%;
			left: 6px;
			width: 8px;
			height: 110px;
			background: green;
			transform-origin: bottom;
		}
		#minutes div::after{
			content: '';
			position: absolute;
			left: 0;
			top: -12px;
			border-left:4px solid transparent;
			border-top:4px solid transparent;
			border-right:4px solid transparent;
			border-bottom:8px solid green;
		}
		#second div{
			position: absolute;
			bottom: 50%;
			left: 8px;
			width: 4px;
			height: 150px;
			background: red;
			transform-origin: bottom;
		}
		#scale{
			position: absolute;
			left: 6px;
			top: 6px;
			width: 348px;
			height: 348px;
			border-radius: 50%;
			border:1px solid gray;
		}
		#scale li.mm{
			position: absolute;
			left:172px;
			width: 4px;
			height: 10px;
			background: gray;
			transform-origin: center 174px;
			
			
		}
		#scale li.hh{
			position: absolute;
			left:170px;
			width: 8px;
			height: 12px;
			background: gray;
			transform-origin: center 174px;
			font-size: 10px;
			font-weight: bold;
			line-height: 40px;	

		}



	</style>
</head>
<body>
	<div id="box">
		<div id="main">
			<div id="hour">
				<div></div>
			</div>
			<div id="minutes">
				<div></div>
			</div>
			<div id="second">
				<div></div>
			</div>
			<p id="S">0</p>
		</div>
		<ul id="scale">
		</ul>
	</div>
</body>
	<script>
		
		setInterval(clock,20)
		function clock(){
			var odate=new Date();
			var s=odate.getSeconds();
			var m=odate.getMinutes();
			var h=odate.getHours();
			hour.style.transform="rotateZ("+(h+m/60)*30+"deg)";
			minutes.style.transform="rotateZ("+(m+s/60)*6+"deg)";
			second.style.transform="rotateZ("+s*6+"deg)";
			S.innerHTML=s;
		}
		for(var i=0;i<60;i++){
			var li=document.createElement("li");
			if (i%5==0) {
				li.className="hh";
				li.innerHTML=i/5;
				if (i/5>=10||i==0) {
					li.style.textIndent= "-2px";
				}
				if (i==0) {
					li.innerHTML=12;
				}
			}else{
				li.className="mm";	
			}
			li.style.transform="rotate("+i*6+"deg)";
			
			scale.appendChild(li);
		}
	</script>
</html>